<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="js/jquery.js"></script>
    <script src="js/axios.js"></script>
    <script>
      // 已知前端所拥有的信息是用户名zhangsan,密码123456
      // 在点击按钮时 使用fetch获取该用户的订单列表?
      $(function () {
        $("button").click(function () {
          fetch("http://127.0.0.1:3001/login", {
            method: "post",
            body: JSON.stringify({ uname: "zhangsan", pwd: 123456 }),
            headers: { "Content-Type": "application/json" },
          })
            .then((data) => {
              return data.json();
            })
            .then((data) => {
              console.log(data);
               return fetch("http://127.0.0.1:3001/orderlist?uid=" +data.uid);
            })
            .then((data) => {
              console.log(data);
              return data.json();
            })
            .then((data) => {
              console.log(data.list);
            });
          
        });
      });
      /**服务器的接口如下:
     * 接口1:登录接口
     *    请求方式: post
     *    url: http://127.0.0.1:3001/login
     *    请求数据: 
     *        uname:用户名
     *        pwd:密码
     *    返回数据:
     *        {
                success: 是否成功,
                message: 登录文字提示,
                uid: 用户的id
                }

                
     * 接口2:查询订单列表
     *    请求方式: get
     *    url: http://127.0.0.1:3001/orderlist
     *    参数: 
     *        uid:用户id
     *    返回数据:
     *      {
              success: true,
              message: "订单列表获取成功",
              list: []
            }
     * **/
    </script>
  </head>
  <body>
    <button>点我发送请求</button>
  </body>
</html>
